<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.style样式的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				绑定style样式
						:style="str"其中str是包含一整段样式的字符串（很恶心，一般不会这么干的）
						:style="obj"其中obj是样式对象。
						:style="arr"其中arr是包含样式对象的数组。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<span :style="arr">你好啊！</span>
			<button>点我</button>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			data:{
				arr:[
							{
								color:'red',
								fontSize:'30px',
							},
							{
								backgroundColor:'pink'
							}
					]
			}
		})
	</script>
</html>